import React, { useEffect, useState } from 'react';
import { Col, Row, Statistic } from 'antd';
import { LikeOutlined, ArrowUpOutlined } from '@ant-design/icons';
import service from '../../../api'
import './Home.scss'

function Home(props) {
    const [userNumber, setUserNumber] = useState('')
    const [goodsNumber, setGoodsNumber] = useState('')
    var getuserNumber = async () => {
        var res = await service.stastic.statistic_user()
        setUserNumber(res.data.data)
    }
    var getgoodsNumber = async () => {
        var res = await service.stastic.statistic_product()
        setGoodsNumber(res.data.data)
    }
    useEffect(() => {
        getuserNumber()
        getgoodsNumber()
    }, [])
    return (
        <div className='home-box'>
            <Row justify="space-around">
                <Col span={4}>
                    <Statistic title="新增用户" value={userNumber} />
                </Col>
                <Col span={4}>
                    <Statistic title="同比新增" value={11.28} precision={2} valueStyle={{ color: '#3f8600', }} prefix={<ArrowUpOutlined />} suffix="%" />
                </Col>
                <Col span={4}>
                    <Statistic title="新增商品" value={goodsNumber} prefix={<LikeOutlined />} />
                </Col>
                <Col span={4}>
                    <Statistic title="同比新增" value={9.3} precision={2} valueStyle={{ color: '#3f8600', }} prefix={<ArrowUpOutlined />} suffix="%" />
                </Col>
            </Row>
        </div>
    );
}

export default Home;